<template>
	<view class="flex flex-col" style="height: 100%">
		<scroll-view class="message-info-container" style="height: 0;flex: 1">
			<view class="message-list flex " v-for="(info, index) in messageList" :key="index"
				:style="{paddingTop: info?.audioPath ? '60rpx' : '30rpx'}">
				<image v-if="!info.isMe" style="width: 80rpx;height: 80rpx;margin-right: 20rpx" :src="info.avatar">
				</image>
				<view class="message-list-info">
					<!--  v-if="info?.audioPath" -->
					<view class="content" :class="{'me-content': info?.isMe}"
						:style="{paddingTop: info?.audioPath ? '60rpx' : '20rpx'}">
						<view v-if="info?.audioPath" class="audio flex items-center justify-center"
							:style="{float: info?.isMe ? 'right' : 'left', 'background': playUrl !== info?.audioPath ? '#fff' : 'linear-gradient(90deg, #7934FD 8%, #E75DFF 90%)'}"
							:class="{'xiaoyi-btn': playUrl === info?.audioPath}" @tap="playVoice(info)">
							<image style="width: 36rpx;height: 36rpx;margin-right: 10rpx"
								:src="`/static/message/${playUrl === info?.audioPath ? 'audio-active' : 'audio'}.svg`">
							</image>
							<audio-animation :animation="playUrl === info?.audioPath"
								:color="playUrl === info?.audioPath ? '#fff' : '#333'"></audio-animation>
						</view>
						<view>{{info?.content}}</view>
					</view>
				</view>
				<image v-if="info.isMe" style="width: 80rpx;height: 80rpx;margin-left: 20rpx" :src="info.avatar">
				</image>
			</view>
		</scroll-view>
		<view class="flex items-center message-send-container" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view v-if="recording" class="info" :class="{'info-stop': willStop}">{{recordTis}}</view>
			<view v-if="!recording" class="message-icon" @click="changeSendType(!sendType)">
				<image v-if="sendType === 1" src="/static/message/keyboard.png"></image>
				<image v-if="sendType === 0" src="/static/message/voice.png"></image>
			</view>
			<view class="message-input" @touchmove.stop.prevent="discard">
				<input v-if="sendType === 0" class="uni-input" placeholder="聊聊你想说的话吧......" />
				<view v-if="sendType === 1" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng"
					@touchend="voiceEnd" @touchcancel="voiceCancel">
					<view :style="{'display': !recording ? 'block' : 'none'}" class="xiaoyi-btn">按住说话</view>
					<view
						:style="{'display': recording ? 'flex' : 'none', 'background': willStop ? 'linear-gradient(180deg, #FF6048 0%, #FF6249 100%)' : 'linear-gradient(90deg, #7934FD 8%, #E75DFF 90%)'}"
						class="xiaoyi-btn items-center justify-center">
						<audio-animation :lineLength="24" :animation="true" :color="'#fff'"></audio-animation>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AudioAnimation from '@/components/audio-animation.vue';
	
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		components: {
			AudioAnimation
		},
		data() {
			return {
				paddingBottomHeight: getApp().globalData.paddingBottomHeight || 18,

				messageList: [{
					isMe: true,
					avatar: '/static/logo.svg',
					content: '对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息对话信息',
					audioPath: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
				}, {
					isMe: false,
					avatar: '/static/logo.svg',
					content: '对话信息',
					audioPath: 'http://tmp/vez537MyFmPL02cd335e22fc5d15fdb3560bf7862430.durationTime=1719.mp3',
				}],

				recorderManager: getApp().globalData.recorderManager,
				playUrl: '',

				sendType: 1,
				recording: false,
				willStop: false,
				recordTis: '手指上滑 取消发送',
				initPoint: {
					Y: 0
				},
			}
		},
		onLoad() {
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
				this.playUrl = innerAudioContext.src;
			});
			innerAudioContext.onEnded(() => {
				console.log('结束播放');
				this.playUrl = "";
			})
			innerAudioContext.onStop(() => {
				console.log('结束播放');
				this.playUrl = "";
			})
			innerAudioContext.onError(() => {
				console.log('播放异常');
				this.playUrl = "";
			})

			uni.$on('globalEvent', this.handleMessage);
		},
		onUnload() {
			uni.$off('globalEvent');
			innerAudioContext.stop();
		},
		methods: {
			handleMessage(event) {
				if (!this.willStop) {
					this.messageList.push({
						isMe: true,
						avatar: '/static/logo.svg',
						content: '对话信息',
						audioPath: event.data.tempFilePath,
					})
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			changeSendType(type) {
				this.sendType = Number(type);
			},
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.recording = true;
				this.initPoint.Y = e.touches[0].clientY;
				this.recorderManager.start({
					format: "mp3"
				});
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				const [touche] = e.touches;
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开取消'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.recordTis = '手指上滑 取消发送'
				this.recorderManager.stop();
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.recorderManagertop(); //录音结束
			},
			playVoice(info) {
				console.log('播放录音', info.audioPath);
				if (info.audioPath === this.playUrl) {
					innerAudioContext.stop();
					return
				};
				innerAudioContext.stop();
				if (info.audioPath) {
					innerAudioContext.src = info.audioPath;
					this.$nextTick(() => {
						innerAudioContext.play();
					});
				}
			},
			discard() {
				return;
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.message-info-container {
		height: 0;
		flex: 1;
	}

	.message-send-container {
		background: #fff;
		padding: 18rpx 20rpx;
		position: relative;
	}

	.message-send-container .info {
		position: absolute;
		top: -40rpx;
		left: 0;
		right: 0;
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.message-list {
		padding: 80rpx 20rpx 0;
	}

	.message-list-info {
		width: 0;
		flex: 1;
	}


	.message-list-info .audio {
		display: inline-flex;
		float: right;
		height: 76rpx;
		border-radius: 76rpx;
		padding: 0 20rpx;
		margin-top: -100rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 10px #00000020;
	}


	.message-list-info .content {
		background: #fff;
		border-radius: 20rpx;
		padding: 60rpx 20rpx 20rpx;
		color: #222;
		font-size: 28rpx;
	}

	.message-list-info .me-content {
		background: #ebe1ff;
	}

	.message-send-container .info-stop {
		color: #FF6048;
	}

	.message-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		border-radius: 40rpx;
		border: 2px solid #7934FD;
	}

	.message-icon image {
		width: 30rpx;
		height: 30rpx;
	}

	.message-input {
		width: 0;
		flex: 1;
		margin-left: 20rpx;
	}

	.message-input input {
		box-sizing: border-box;
		border: 2px solid #7934FD;
		height: 90rpx;
		border-radius: 90rpx;
		padding: 0 20rpx;
	}
</style>